<template>
 <a href="/me.html"><span class="logonImg"><img src="img/left.jpg"></span></a>
	<span class="span" @click="edit()">{{txt}}</span>
	<div class="content">
		<a href="javascript:void(0)" class="item" v-for="obj in data" >
			<div class="check" @click="check(obj)" v-if="edit_bol">
				<!-- 判断obj.bol为true的时候显示 -->
				<img v-if="obj.bol" src="./img/gou.png" alt="">
				<!-- 判断else的时候隐藏 -->
				<img v-else="obj.bol" src="./img/gou2.png" alt="">
			</div>
			<div class="con">
				<img :src="obj.img" alt="">
				<div class="txt">
					<h4>{{obj.title}}</h4>
						<p>￥{{obj.price}}</p>
				</div>
			</div>
		</a>

	</div>
	<div class="all" v-if="edit_bol">
		<div>
			<div class="check" @click="allFn()" >
				<img v-if="all" src="./img/gou.png" alt="">
				<img v-else src="./img/gou2.png" alt="">
				全选
			</div>
			<div @click="del(arr)"  class="btn del">
				删除
			</div>		
		</div>	
	</div>
</template>

<script type="text/javascript">
(function(html){
	change()
	function change(){
		var w = html.clientWidth;
		if (w>640) {
			w = 640;
		}
		var size = 100*(w/375).toFixed(2);
		html.style.fontSize = size+"px"
	}
	window.addEventListener('resize',function () {
		change()
	})
})(document.documentElement)
export default {
	ready(){
		this.dataFn();
	},
	data(){
		return{
			data:[
  			// {title:"坚果坚果坚果坚果坚果坚果坚果坚果",gg:"1盒6片",price:29.5,bol:false,img:require("./img/hetao.jpg")},
  			// {title:"坚果坚果坚果坚果坚果坚果坚果坚果",gg:"1盒6片",price:29.5,bol:false,img:require("./img/hetao.jpg")},
  			// {title:"坚果坚果坚果坚果坚果坚果坚果坚果",gg:"1盒6片",price:29.5,bol:false,img:require("./img/hetao.jpg")},
  			// {title:"坚果坚果坚果坚果坚果坚果坚果坚果",gg:"1盒6片",price:29.5,bol:false,img:require("./img/hetao.jpg")},
  			// {title:"坚果坚果坚果坚果坚果坚果坚果坚果",gg:"1盒6片",price:29.5,bol:false,img:require("./img/hetao.jpg")},
  			// {title:"坚果坚果坚果坚果坚果坚果坚果坚果",gg:"1盒6片",price:29.5,bol:false,img:require("./img/hetao.jpg")}
  			],
  			bol:false,
  			all:false,
  			edit_bol:false,
  			txt:"编辑",
  			arr:[]
		};
	},
	methods:{
		 dataFn(){
      var _this=this;
      $.ajax({
      type:"GET",
      url:"http://172.16.18.39/login/data.php?callback=callback",
      dataType:"jsonp",
      data:{type:"dataCollect"},
      success:function(data){
          _this.data = data;
      }
    })
      },
		check(obj){
			if(this.arr.indexOf(obj.id)>-1){
				var n = this.arr.indexOf(obj.id);
				this.arr.splice(n,1);
			}else{
				this.arr.push(obj.id);
			}
			//取反 如果是F点击后就变成T 
			obj.bol=!obj.bol;
			for (var i = 0; i < this.data.length; i++) {
				if (!this.data[i].bol) {
					//退出循环
					break;
				}
			}
			if (i==this.data.length) {
				this.all = true;
			}else{
				this.all = false;
			}
		},
		//全选
		allFn(obj){
			this.all = !this.all;
			for (var i = 0; i < this.data.length; i++) {
				this.data[i].bol = this.all;
				if(this.arr.indexOf(this.data[i].id)>-1){
				var n = this.arr.indexOf(this.data[i].id);
				this.arr.splice(n,1);
			}else{
				this.arr.push(this.data[i].id);
			}
			}
		},
		//编辑
		edit(){
			//取反
			this.edit_bol=!this.edit_bol;
			if (this.edit_bol) {
				this.txt = "完成"
			}else{
				this.txt = "编辑"
			}
		},
		del(id){
		var _this=this;
		if(confirm("确定要取消该订单吗?")){
			for (var i = 0; i < this.arr.length; i++) {
				$.ajax({
     			 type:"GET",
     			 url:"http://172.16.18.39/login/data.php?callback=callback",
     			 dataType:"jsonp",
     			 data:{type:"dataCollectDel",id:this.arr[i]},
     			 success:function(data){
     			    _this.dataFn();//调用刷新
     			    _this.arr = [];
     			 }
     			 });
				}
     		}
		}
	}
}
</script>

<style>
    .logonImg{
    display: inline-block;
    position: fixed;
    top: 1.5%;
    width: 5%;
    left: 2%;
    z-index:1888;	
  }
   .logonImg img{
    width:100%;
  }
	em{font-style: normal;}
	a{text-decoration: none;}
	html,body{
		width: 100%;
		height: 100%;
		font-size: 15px;
	}
	 .span{
		position: fixed;
		right: .1rem;
		top: .1rem;
		font-size: .16rem;
		color: white;
		z-index:1888;		
	}

	.content{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		margin-bottom: .52rem;
	}
	.content a{
		display: flex;
		padding: .1rem .1rem;
		position: relative;
	}
	.content a:before{
		content: " ";
	    position: absolute;
	    left: .1rem;
	    bottom: 0;
	    right: .1rem;
	    height: 1px;
	    border-bottom: 1px solid #c0bfc4;
	    color: #c0bfc4;
	    transform-origin: 0 0;
	    transform: scaleY(.5);
	}
	.content a .check{
		display: flex;
		width: .4rem;
		align-items:center;
		justify-content:center;

	}
	.content a .check img{
		width: .25rem;
	}
	.content a .check img:nth-child(2){
		display: none;
	}
	.content a .con{
		flex:1;
	}
	.content a .con img{
		float: left;
		width: .75rem;
		margin: 0 5px;
	}
	.content a .con .txt{color: black;}
	.content a .con .txt h4{white-space:nowrap;  overflow: hidden;text-overflow:ellipsis;line-height: .2rem;padding-right: .5rem;}
	.content a .con .txt p{color: red;margin: .1rem 0;}
	.all{position: fixed;bottom: 0;width: 100%;height: .5rem;background: #f2f2f2;z-index: 999;}
	.all>div{display: flex;justify-content:space-between;align-items: center;height: .5rem;}
	.all>div:nth-child(2){display: none;}
	.all>div .check{display: flex;align-items: center;margin-left:.1rem;}
	.all>div .check img{width: .25rem;height: .25rem;margin: 0 .1rem;}
	.all>div .check img:nth-child(2){display: none;}
	.all>div .btn{width: 1.2rem;height: .35rem;border-radius: 5px;background: #ee4147;text-align: center;line-height: .35rem;color: white;margin-right: .1rem;}
</style>





